<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('查看物流')" />
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal m">
        <input th:value="${orderNo}" id="orderNo" type="hidden">
        <div class="ibox-content">
            <h4 class="form-header h5">快递信息</h4>
            <div class="form-group">
                <label class="col-sm-3 control-label">快递名称：</label>
                <div class="col-sm-3">
                    <span th:text="${expressName}"  class="form-control"></span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">快递单号：</label>
                <div class="col-sm-3">
                    <span th:text="${expressOrderNo}"  class="form-control"></span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">收货人：</label>
                <div class="col-sm-3">
                    <span th:text="${shopOrder.takeName}"  class="form-control"></span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">手机号：</label>
                <div class="col-sm-3">
                    <span th:text="${shopOrder.takePhone}"  class="form-control"></span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">收货地址：</label>
                <div class="col-sm-3">
                    <textarea rows="5" cols="10" th:text="${shopOrder.area + ' ' +shopOrder.takeAddress}"  readonly class="form-control"></textarea>
                </div>
            </div>
            <div id="ibox-content">
                <h4 class="form-header h5">物流信息</h4>
                <div id="vertical-timeline" class="vertical-container light-timeline">
                </div>
            </div>
            <div style="margin-left: 5px;" id="no"></div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jasny-bootstrap-js" />
<th:block th:include="include :: utils-js" />
<script th:inline="javascript">
    $(function () {
        var prefix = ctx + "ShopOrder/ShopOrder";
        //订单编号
        var orderNo = $("#orderNo").val();
        var url = prefix + "/getDelivery?orderNo=" + orderNo;
        var html = '';
        var class1 = "fa fa-truck";
        $.post(url, function (result) {
            if (result.code != '0'){
                $("#no").html(result.msg);
                return;
            }
            $("#no").html('');
            result.rows.forEach(function(value,index){
                if (index == 0){
                    class1 = "fa fa-spinner fa-spin";
                } else {
                    class1 = 'fa fa-truck';
                }
                html += " <div class=\"vertical-timeline-block\">\n" +
                    "                         <div class=\"vertical-timeline-icon navy-bg\" >\n" +
                    "                             <i  class='" + class1 +"'></i>\n" +
                    "                         </div>\n" +
                    "                         <div class=\"vertical-timeline-content\">\n" +
                    "                             <p> "  + value.AcceptStation + "</p>\n" +
                    "                             <span class=\"vertical-date\">\n" +
                    "                         <small>" + value.AcceptTime +"</small>\n" +
                    "                     </span>\n" +
                    "                         </div>\n" +
                    "                     </div>";
            });
            $("#vertical-timeline").append(html)
        });
    });

</script>
</body>
</html>
